<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1.0,minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <meta name="keywords" content="半次元,次元社,第一弹,juju,萌购,dilidili,布丁,bilibili,战舰少女,少女咖啡枪,前线,暖暖,哔哩哔哩,cosplay,女优,欧派,捏他,捏ta,被窝,绝对领域,动画,漫画,弹幕,宅男,声优,梦见,集,萌娘,同人,手游,美图,绅士,阴阳师">
  <meta name="description" content="【难得一见】的二次元虚拟生活平台，绝对不同于“论坛”、“社团”、“同好会”的存在；【美貌绝伦】的移动App，将一成不变的界面以动漫学园的形式呈现，大欧派前辈、死库水学妹都是你可以随意调戏的看板娘。【屈指可数】的GalGame化应用，将一切内容以游戏形式呈现，线下可攻略女主角、线上能组团推主线；【凤毛麟角】般充满惊喜的App，全图随机彩蛋每日不同、神奇Gacha活动好礼连连，一不小心就会收到霓虹国寄来的惊喜；【名列前茅】的二次元综合信息网，新番漫画美图音乐展会悉数涵盖，更有珍稀资源专供作为老司机的你；【实力强劲】的dalao级行业地位，与各种漫展、演唱会、旅行团、手办销售、游戏厂商都有一腿，优惠福利应有尽有。">
  <link rel="shortcut icon" href="../public/img/x-icon.png">
  <link rel="bookmark" href="../public/img/x-icon.png" type="image/x-icon">
  <link rel="apple-touch-icon-precomposed" href=".../public/img/x-icon.png">
  <title>Kira - 你的二次元生活，动漫新番资源福利社区</title>
  <link rel="stylesheet" href="../public/css/reset.css">
  <link rel="stylesheet" href="../public/css/swiper-4.2.6.min.css">
  <link rel="stylesheet" href="../public/css/font-awesome.min.css">
  <link rel="stylesheet" href="../public/css/com.css">
</head>

<body>
  <div id="reco" class="recom">
    <public-header :status="header"></public-header>
    <div class="content body-content">
      <div class="hot">
        <div class="left-content">
          <h2>
            <div class="title">热门推荐</div>
            <div class="detail"><span><i class="fa fa-refresh"></i>换一批</span></div>
          </h2>
          <ul class="list">
            <li v-for="item in 10">
              <a href="#">
                <div class="img-contet">
                  <img src="../public/img/temp3.jpg" alt="">
                  <div class="info"><img src="../public/img/temp1.png" alt=""><span>ちょこ庵</span></div>
                </div>
                <p class="description">えっちゃん本気もーどえっちゃん本気もーどえっちゃん本気もーど</p>
                <div class="view-comments"><span class="view"> <i></i>3213</span><span class="comments"><i></i>61</span></div>
              </a>
            </li>
          </ul>
        </div>
        <user-info :data="userInfo"></user-info>
      </div>
      <div class="news">
        <div class="left-content">
          <h2>
            <div class="title">
              <span>新闻部</span>
            </div>
            <div class="detail">
              <span>
                <i class="fa fa-refresh"></i>换一批</span>
              <a href="./recomDetails.html">进去逛逛
                <i class="fa fa-angle-right"></i>
              </a>
            </div>
          </h2>
          <ul class="list" v-for="item in division" v-if="item.name=='新闻部'">
            <li v-for="(it,key) in item.list" v-if="key < 4">
              <a href="#">
                <dl>
                  <dt>
                    <image-item
                      :src="it.icon.path"
                    ></image-item>
                  </dt>
                  <dd>
                    <h3>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h3>
                    <div>拥有这些东西我是真的头疼，你说是不是，我说舒服舒服水电费</div>
                    <div class="view-comments">一个小时前
                      <div class="right-view">
                        <span class="view">
                          <i></i>3213</span>
                        <span class="comments">
                          <i></i>61</span>
                        <span class="love">
                          <i></i>72</span>
                      </div>
                    </div>
                  </dd>
                </dl>
              </a>
            </li>
          </ul>
        </div>
        <div class="right-content">
          <h2 class="img-title">摸鱼部
            <b class="ranking">排行榜</b>
            <div class="data">
              <span class="active">今日</span>
              <span>本周</span>
            </div>
          </h2>
          <ul class="list">
            <li v-for="item in 5">
              <a href="#" v-if="item<=3">
                <dl>
                  <dt :data-num="item">
                    <img src="../public/img/temp2.jpg" alt="">
                  </dt>
                  <dd>
                    <h6>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h6>
                    <div>UP:水树奈奈</div>
                    <div class="view-comments">
                      <span class="view">
                        <i></i>3213</span>
                      <span class="comments">
                        <i></i>61</span>
                    </div>
                  </dd>
                </dl>
              </a>
              <a href="http://www.baidu.com" v-else>
                <p :data-num="item">身材略过丰满 《闪乱神乐：沙滩戏水》索尼身材略过丰满 《闪乱神乐：沙滩戏水》索尼</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="news body-content">
        <div class="left-content">
          <h2>
            <div class="title">
              <span>新闻部</span>
            </div>
            <div class="detail">
              <span>
                <i class="fa fa-refresh"></i>换一批</span>
              <a href="./recomDetails.html">进去逛逛
                <i class="fa fa-angle-right"></i>
              </a>
            </div>
          </h2>
          <ul class="list" v-for="item in division" v-if="item.name=='新闻部'">
            <li v-for="(it,key) in item.list" v-if="key < 4">
              <a href="#">
                <dl>
                  <dt :data-num="item"><img :src="it.icon.path ? 'http://s.moemoe.la/'+ it.icon.path : '../public/img/default.png' " alt=""></dt>
                  <dd>
                    <h3>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h3>
                    <div>拥有这些东西我是真的头疼，你说是不是，我说舒服舒服水电费</div>
                    <div class="view-comments"><span>一个小时前</span>
                      <div class="right-view">
                        <span class="view">
                          <i></i>3213</span>
                        <span class="comments">
                          <i></i>61</span>
                        <span class="love">
                          <i></i>72</span>
                      </div>
                    </div>
                  </dd>
                </dl>
              </a>
            </li>
          </ul>
        </div>
        <div class="right-content">
          <h2 class="img-title">摸鱼部
            <b class="ranking">排行榜</b>
            <div class="data">
              <span class="active">今日</span>
              <span>本周</span>
            </div>
          </h2>
          <ul class="list">
            <li v-for="item in 5">
              <a href="#" v-if="item<=3">
                <dl>
                  <dt :data-num="item">
                    <img src="../public/img/temp2.jpg" alt="">
                  </dt>
                  <dd>
                    <h6>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h6>
                    <div>UP:水树奈奈</div>
                    <div class="view-comments">
                      <span class="view">
                        <i></i>3213</span>
                      <span class="comments">
                        <i></i>61</span>
                    </div>
                  </dd>
                </dl>
              </a>
              <a href="http://www.baidu.com" v-else>
                <p :data-num="item">身材略过丰满 《闪乱神乐：沙滩戏水》索尼身材略过丰满 《闪乱神乐：沙滩戏水》索尼</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <public-footer></public-footer>
    </div>
  </div>
  <script src="../public/js/jquery-1.11.1.min.js"></script>
  <script src="../public/js/underscore.js"></script>
  <script src="../public/js/swiper-4.2.6.min.js"></script>
  <script src="../public/js/vue.js"></script>
  <script src="../public/js/com.js"></script>
  <script src="../public/components/components.js"></script>
  <script>
    var rec = new Vue({
      el: '#reco',
      data: {
        header: {
          loginStatus: true,
          index: 3,
        },
        userInfo: {
          index:2,
        },
        division: [{
            name: "新闻部",
            checked: true,
            list: {},
            rank: {}
          },
          {
            name: "美图部",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "游戏部",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "图书馆",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "影音部",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "茶话部",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "⼩卖部",
            checked: false,
            list: {},
            rank: {}
          },
        ],
      },
      mounted() {
        this.getnews();
      },
      methods: {
        getnews: function () {
          $.ajax({
            url: "http://2333.moemoe.la/api/cal/docs?index=0&size=20&roomId=26f9831a-5f7f-11e6-8f94-d0a637eac7d7&before=20180605162220",
            dataType: "json",
            data: {
              'index': 0,
              'size': 0,
              'roomld': '26f9831a-5f7f-11e6-8f94-d0a637eac7d7',
              'before': '20180605162220'
            },
            success: function (data) {
              rec.division[0].list = data.data.list;
            }
          })
        },
      },
    })
  </script>
</body>
</html>